import React from 'react';
import { Button } from '@maycur/antd5';
import FilterBarItem from './FilterBarItem';
import getT from '../../lib/getT';
import './FilterBar.less'

const prefix = 'mctable';

function FilterBar({ filterList, removeFilter, clearFilter, pagination, hideReset }) {
    return (
        <div className={`${prefix}-filterbar`}>
            <span className={'filter-label'}>{getT('筛选条件')}</span>
            <div className={'flex-1'}>
                <div className={'content'}>
                    <div className="filters-wrapper">
                        {filterList.map((filter, index) => {
                            return (
                                <FilterBarItem filter={filter} removeFilter={removeFilter} key={filter.key} />
                            )
                        })}
                    </div>

                    <div className={'filter-data-state'}>
                    {getT('共')}<span className={'filter-data-state_num'}>{pagination.total}</span>{getT('条记录')}
                    </div>
                    {filterList.length > 0 && !hideReset ? (
                        <div className={'filter-clear'}>
                            <Button type="primary" size="small" onClick={() => { clearFilter(filterList) }}>{getT('重置')}</Button>
                        </div>
                    ) : null}
                </div>
            </div>
        </div>
    )
}

export default FilterBar;